<template>
  <div id="modal-container" ref="modal" :class="myClass">
    <div class="modal-background">
      <div class="modal">
        <div class="title">弹框</div>
        <h2>{{ modelValue }}</h2>
        <p @click="clc">{{ height }}</p>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  height: {
    type: Number,
    default: 500,
  },
});
let height = props.height + "px";

let emit = defineEmits(["update:modelValue"]);
 
const modal = ref(null);
const clc = () => {
  emit("update:modelValue", false);
  modal.value.classList.add("out");
};
const myClass = ref("");
watch(
  () => props.modelValue,
  (val, preVal) => {
    console.log(props.height);
    if (val) {
      //   modal.value.classList.add("one");
      //   modal.value.classList.remove("out");
      myClass.value = "one";
    } else {
      //   modal.value.classList.add("out");
      //   modal.value.classList.remove("one");
      myClass.value = "out";
    }
  },
  {
    // immediate: true,
    deep: true,
  }
);

onMounted(() => {});
</script>
<style scoped lang="scss">
#modal-container {
  position: fixed;
  display: table;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  transform: scale(0);
  //   z-index: 1;
  z-index: 100;
}

#modal-container.one {
  width: 100%;
  height: 100%;
  transform: scaleY(0.01) scaleX(0);

  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.one .modal-background .modal {
  width: 800px;
  // height: 800px;
  // height: var(--height);
  height: v-bind("height");
  transform: scale(0);
  border: 1px solid red;
  padding: 10px;
  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  
}

#modal-container.out {
  transform: scale(1);
  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container.out .modal-background .modal {
  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

#modal-container .modal-background {
  width: 100%;
  height: 100%;
  display: table-cell;
  background: rgba(0, 0, 0, 0.8);
  // text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}

#modal-container .modal-background .modal {
  background: white;

  display: inline-block;
  border-radius: 3px;
  font-weight: 300;
  position: relative;
}

#modal-container .modal-background .modal h2 {
  font-size: 25px;
  line-height: 25px;
  margin-bottom: 15px;
}

#modal-container .modal-background .modal p {
  font-size: 18px;
  line-height: 22px;
}

#modal-container .modal-background .modal .modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

#modal-container .modal-background .modal .modal-svg rect {
  stroke: #fff;
  stroke-width: 2px;
  stroke-dasharray: 778;
  stroke-dashoffset: 778;
}

.content {
  min-height: 100%;
  height: 100%;
  background: #fd7575;
  position: relative;
  z-index: 0;
}

.content h1 {
  padding: 75px 0 30px 0;
  text-align: center;
  font-size: 30px;
  line-height: 30px;
}

.content .buttons {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.content .buttons .button {
  display: inline-block;
  text-align: center;
  padding: 10px 15px;
  margin: 10px;
  background: red;
  font-size: 18px;
  background-color: #efefef;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.content .buttons .button:hover {
  color: white;
  background: #009bd5;
}

@keyframes unfoldIn {
  0% {
    transform: scaleY(0.005) scaleX(0);
  }

  50% {
    transform: scaleY(0.005) scaleX(1);
  }

  100% {
    transform: scaleY(1) scaleX(1);
  }
}

@keyframes unfoldOut {
  0% {
    transform: scaleY(1) scaleX(1);
  }

  50% {
    transform: scaleY(0.005) scaleX(1);
  }

  100% {
    transform: scaleY(0.005) scaleX(0);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}
</style>
